<script setup lang="ts">
import type { Defect } from '@/index.d';

const props = defineProps({
  defectList: Array<Defect>
});
const xLabel = ref('检测月份');
const yLabel = ref('缺陷长度');
const checkAll = ref(false);
</script>
<template>
  <div class="core-container">
    <div class="core-container-body">
      <ChinaMap
        v-if="xLabel === '项目地址'"
        :defectList="props.defectList"
        :yLabelType="yLabel"
        :checkAll="checkAll"
      />
      <StackEchart
        v-else
        :defectList="props.defectList"
        :xLabelType="xLabel"
        :yLabelType="yLabel"
        :checkAll="checkAll"
      />
    </div>
    <div class="core-container-footer">
      <div>
        Y轴：
        <el-radio-group v-model="yLabel">
          <el-radio value="缺陷数量" label="缺陷数量" />
          <el-radio value="缺陷长度" label="缺陷长度" />
          <!-- <el-radio value="工件数量" label="工件数量" /> -->
        </el-radio-group>
      </div>
      <div>
        X轴：
        <el-radio-group v-model="xLabel">
          <el-radio value="检测月份" label="检测月份" />
          <el-radio value="生产令号" label="生产令号" />
          <el-radio value="业主单位" label="业主单位" />
          <el-radio value="项目地址" label="项目地址" />
        </el-radio-group>
      </div>
      <div><el-checkbox v-model="checkAll" label="显示所有" /></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.core-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .core-container-body {
    flex: 1;
  }

  .core-container-footer {
    height: 70px;
    display: flex;
    justify-content: space-around;
  }
}
</style>
